import {messages} from "share/common";
import React from 'react'
import {connect} from 'react-redux'
import 'styles/third-consumption/third-consumption.scss'
import BookConsumption from 'containers/third-consumption/tabs/book-consumption'
import OrderConsumption from 'containers/third-consumption/tabs/order-consumption'
import SlideFrame from "components/slide-frame";
import BookConsumptionFrame from 'containers/third-consumption/consumption-book/book-consumption-frame';
import {Tabs} from 'antd'

const TabPane = Tabs.TabPane;

class ThirdConsumption extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showConsumptionFrame: false,
      debounceSlideFrame: false, //侧滑框防抖，解决快速关闭侧滑框的情况
      url: '', //甄选机票+甄选酒店：首页链接
    };
  }

  componentDidMount() {
    if (window.addEventListener) {
      window.addEventListener('message', this.onFrameClose, false);
    } else {
      window.attachEvent('message', this.onFrameClose);
    }
  }

  componentWillUnmount() {
    if (window.addEventListener) {
      window.removeEventListener('message', this.onFrameClose, false);
    } else {
      window.detachEvent('message', this.onFrameClose);
    }
  }

  componentWillReceiveProps(nextProps) {
    // if(nextProps.location.action === 'REPLACE'){
      this.setState({url: ''});
    // }
  }

  onFrameClose = (e) => {
    if (e.data && e.data === 'exitHlyHotelWeb') {
      this.setState({ showConsumptionFrame: false });
    }
  };

  // 甄选机票+甄选酒店：单独用iFrame打开甄选首页
  chooseZhenXuan = (flag, url) => {
    this.setState({ url }, () => {
      this.setState({showConsumptionFrame: true});
    });
  };

  render() {
    const {showConsumptionFrame, debounceSlideFrame, url} = this.state;

    return (
      <div>
        <Tabs>
          <TabPane tab={messages('third-consumption.key1')/*预订*/} key='1'>
            <BookConsumption
              onChooseZhenXuan={link => this.chooseZhenXuan('book', link)}
            />
          </TabPane>
          {/*<TabPane tab={messages('third-consumption.key2')/*订单*!/ key='2'>
            <OrderConsumption
              onChooseZhenXuan={link => this.chooseZhenXuan('order', link)}
            />
          </TabPane>*/}
        </Tabs>
        {
          url && <SlideFrame
            show={showConsumptionFrame}
            content={BookConsumptionFrame}
            hasFooter={false}
            hasPadding={false}
            hasMask={false}
            params={{
              url
            }}
            onClose={() => !debounceSlideFrame && this.setState({showConsumptionFrame: false, url:''})}
            // afterClose={this.handleCloseExpense}
            cusClass={'zx-frame'}
            width="calc(100vw - 206px)"
            // height="calc(100vh - 64px)"
            // top="64px"
          />
        }
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company
  }
}

export default connect(mapStateToProps)(ThirdConsumption);
